<template>
	<view>
		<view class="bigbox">
			<p class="hudong">互动</p>
			<view id="yinsi1">
				<view class="yijianfanghu">
					<view id="yjfh">一键防护</view>
					<u-switch space="2" v-model="value1" size="25" activeColor="#f93f3f"
						inactiveColor="rgb(230, 230, 230)" class="huakuai">
					</u-switch>
				</view>
			</view>
			<p class="kaiqi">开启后，7天内将不接收未关注人的私信/评论/分享</p>




			<view id="yinsi2">
				<view class="weixin">
					<view id="wxzh">在线状态</view>
					<view id="wx">好友
						<image src="@/static/img/youtubiao.png" mode="" class="you"></image>
					</view>
				</view>
				<view class="weibo">
					<view id="wbzh">展示聊天标识</view>
					<u-switch space="2" v-model="value2" size="25" activeColor="#f93f3f"
						inactiveColor="rgb(230, 230, 230)" class="huakuai">
					</u-switch>
				</view>
				<view class="qqzhanghao">
					<view id="qqzh">只允许我关注的人评论我</view>
					<u-switch space="2" v-model="value3" size="25" activeColor="#f93f3f"
						inactiveColor="rgb(230, 230, 230)" class="huakuai">
					</u-switch>
				</view>
				<view class="qqzhanghao">
					<view id="qqzh">只允许我关注的人给我发弹幕</view>
					<u-switch space="2" v-model="value4" size="25" activeColor="#f93f3f"
						inactiveColor="rgb(230, 230, 230)" class="huakuai">
					</u-switch>
				</view>
				<view class="qqzhanghao">
					<view id="qqzh">只允许我关注的人@我</view>
					<u-switch space="2" v-model="value5" size="25" activeColor="#f93f3f"
						inactiveColor="rgb(230, 230, 230)" class="huakuai">
					</u-switch>
				</view>
				<view class="qqzhanghao">
					<view id="qqzh">谁可以私信我</view>
					<view id="qq">默认
						<image src="@/static/img/youtubiao.png" mode="" class="you"></image>
					</view>
				</view>

				<view class="Applezhanghao">
					<view id="apzh">我的收藏</view>
					<view id="ap">已公开
						<image src="@/static/img/youtubiao.png" mode="" class="you"></image>
					</view>
				</view>
			</view>   
			
			
			
			
			<p class="guanxi">关系</p>
			<view id="yinsi3">
				<view class="weixin">
					<view id="wxzh">找到我的方式</view>
					<view id="wx">
						<image src="@/static/img/youtubiao.png" mode="" class="you"></image>
					</view>
				</view>
				<view class="weixin">
					<view id="wxzh">关注与粉丝列表</view>
					<view id="wx">
						<image src="@/static/img/youtubiao.png" mode="" class="you"></image>
					</view>
				</view>

				<view class="qqzhanghao">
					<view id="qqzh">推荐给可能认识的人</view>
					<view id="qq">
						<image src="@/static/img/youtubiao.png" mode="" class="you"></image>
					</view>
				</view>
			
				<view class="Applezhanghao">
					<view id="apzh">黑名单用户</view>
					<view id="ap">
						<image src="@/static/img/youtubiao.png" mode="" class="you"></image>
					</view>
				</view>
			</view>
			
			
			
			
			<p class="guanxi">更多</p>
			<view id="yinsi4">
				<view class="weixin">
					<view id="wxzh">个性化选项</view>
					<view id="wx">
						<image src="@/static/img/youtubiao.png" mode="" class="you"></image>
					</view>
				</view>
				<view class="weixin">
					<view id="wxzh">程序化广告设置</view>
					<view id="wx">
						<image src="@/static/img/youtubiao.png" mode="" class="you"></image>
					</view>
				</view>
				<view class="Applezhanghao">
					<view id="apzh">允许地理标题推荐</view>
					<u-switch space="2" v-model="value6" size="25" activeColor="#f93f3f"
						inactiveColor="rgb(230, 230, 230)" class="huakuai">
					</u-switch>
				</view>
			</view>
			
			
			
			
			
			
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: "+86 185****9327",
				value1: false,
				value2: false,
				value3: false,
				value4: false,
				value5: false,
				value6: false
			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.bigbox {
		width: 100%;
		height: 2400rpx;
		/* 溢出隐藏 */
		overflow: hidden;
		/* 弹性 */
		display: flex;
		/* 固定 */
		/* position: fixed; */
		/* 水平分布 */
		/* justify-content: space-evenly; */
		/* 换行 */
		/* flex-wrap: wrap; */
		flex-direction: column;
		background-color: rgb(250, 250, 250);

	}

	.huakuai {
		margin-right: 30rpx;
	}

	.you {
		/* margin-left: 650rpx;
	margin-top: 40rpx; */
		width: 40rpx;
		height: 40rpx;
	}

	.faxian {
		text-align: center;
		position: absolute;
		left: 320rpx;
		top: 38rpx;
		font-size: 36rpx;

	}

	#yinsi1 {
		width: 92%;
		height: 120rpx;
		background-color: rgb(255, 255, 255);
		border-radius: 30rpx;
		margin-top: 10rpx;
		margin-left: 34rpx;
		position: relative;
	}

	.hudong {
		color: rgb(140, 140, 140);
		margin-top: 40rpx;
		margin-bottom: 10rpx;
		margin-left: 60rpx;
	}
	.guanxi {
		color: rgb(140, 140, 140);
		margin-top: 60rpx;
		margin-bottom: -30rpx;
		margin-left: 60rpx;
	}

	.kaiqi {
		font-size: 28rpx;
		margin-left: 50rpx;
		margin-top: 20rpx;
		margin-bottom: 70rpx;
		color: rgb(140, 140, 140);

	}

	.yijianfanghu {
		width: 100%;
		height: 120rpx;
		position: relative;
		border-radius: 0rpx, 0rpx, 30rpx, 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#yjfh {
		margin: 30rpx;
	}

	#yinsi2 {
		width: 92%;
		height: 840rpx;
		background-color: rgb(255, 255, 255);
		border-radius: 30rpx;
		margin-left: 34rpx;
		position: relative;
	}

	.weixin {
		width: 100%;
		height: 120rpx;
		border-bottom: 2rpx solid rgb(210, 210, 210);
		position: relative;
		border-radius: 30rpx, 30rpx, 0rpx, 0rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#wxzh {
		margin: 30rpx;
	}

	#wx {
		color: rgb(140, 140, 140);
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}


	.weibo {
		width: 100%;
		height: 120rpx;
		border-bottom: 2rpx solid rgb(210, 210, 210);
		position: relative;
		border-radius: 30rpx, 30rpx, 0rpx, 0rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#wbzh {
		margin: 30rpx;
	}

	#wb {
		color: rgb(140, 140, 140);
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}




	.qqzhanghao {
		width: 100%;
		height: 120rpx;
		border-bottom: 2rpx solid rgb(210, 210, 210);
		position: relative;
		border-radius: 30rpx, 30rpx, 0rpx, 0rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#qqzh {
		margin: 30rpx;
	}

	#qq {
		color: rgb(140, 140, 140);
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}


	.Applezhanghao {
		width: 100%;
		height: 120rpx;
		position: relative;
		border-radius: 0rpx, 0rpx, 30rpx, 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#apzh {
		margin: 30rpx;
	}

	#ap {
		color: rgb(140, 140, 140);
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}
	#yinsi3 {
		width: 92%;
		height: 480rpx;
		background-color: rgb(255, 255, 255);
		border-radius: 30rpx;
		margin-left: 34rpx;
		margin-top: 60rpx;
		position: relative;
	}
	#yinsi4 {
		width: 92%;
		height: 360rpx;
		background-color: rgb(255, 255, 255);
		border-radius: 30rpx;
		margin-left: 34rpx;
		margin-top: 60rpx;
		position: relative;
	}
</style>